<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生档案</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
            font-family: '汉仪大隶书繁';
        }

        form {
            max-width: 600px;
            width: 100%;
            margin: 24px auto;
            font-size: 28px;
        }

        label {
            display: block;
            margin: 10px 10px 15px;
            font-size: 24px;
        }

        input {
            display: block;
            width: 100%;
            height: 40px;
            font-size: 22px;
            margin-top: 10px;
            padding: 6px 10px;
            color: #333;
            border: 1px solid #CCC;
            box-sizing: border-box;
        }

        meter, progress {
            display: block;
            width: 100%;
            margin-top: 10px;
        }

        .btn {
            margin-top: 30px;
        }

        .btn input {
            color: #FFF;
            background-color: green;
            border: 0 none;
            outline: none;
            cursor: pointer;
        }

    </style>
</head>
<body>
<form action="/wanshan" method="post">
    <fieldset>
        <legend>个人资料</legend>
        <label for="">
            姓名: <input type="text" required autofocus placeholder="请输入姓名" value="<%= name %>" name="name">
        </label>
        <label for="">
            密码: <input type="password" required autofocus placeholder="请输入密码" value="<%= password %>" name="password">
        </label>
        <label for="">
            邮箱地址: <input type="email" placeholder="请输入邮箱地址" value="<%= email %>" name="email">
        </label>
        <label for="">
            手机号码: <input type="tel" pattern="1[3,5,8]\d{9}" placeholder="请填写手机号码" name="tel">
        </label>
        <label for="">
            工作岗位: <input type="text" list="course" placeholder="岗位" name="gangwei">
            <datalist id="course">
                <option value="前端与移动开发"></option>
                <option value="PHP"></option>
                <option value="JAVA"></option>
                <option value="Android"></option>
                <option value="IOS"></option>
                <option value="UI设计"></option>
                <option value="C++"></option>
            </datalist>
        </label>
        <label for="">
            学历: <input type="text" list="xueli" placeholder="学历" name="xueli">
            <datalist id="xueli">
                <option value="专科以下"></option>
                <option value="专科"></option>
                <option value="本科"></option>
                <option value="本科以上"></option>
            </datalist>
        </label>
        <label for="">
            月薪: <input type="number" max="20000" min="2000" id="score" step="10" placeholder="输入月薪" name="yuexin">
        </label>
        <label for="">
            薪资水平: <meter max="20000" min="2000" low="60" high="80"  id="level"></meter>
        </label>

        <label for="">
            入职时间: <input type="date"  name="ruzhiDate">
        </label>
        <label for="">
            <% var pinggu=Math.random()*100; %>
            业务评估: <progress min="0" max="100" class="ywpinggu" value="<%= pinggu %>"></progress>
        </label>
        <label for="" class="btn">
            <input type="submit" value="保存">
        </label>
    </fieldset>
</form>
<script>
    var score = document.getElementById('score');
    var level = document.getElementById('level');

    score.oninput = function () {
        level.value = this.value;
    }
</script>
</body>
</html>